<!--
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 *
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *            佛祖保佑     永不宕机     永无BUG
 -->

<template>
  <div>
    <!-- 上面的 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-top">
          <div class="big-box">
            <div class="box-input">
              <span class="txtspan"> 取件任务编号:</span>
              <span><el-input
                v-model="input"
                placeholder="请输入取件任务编号"
                clearable
                class="input-with-select"
              /></span>
            </div>
            <div class="box-input">
              <span class="txtspan">订单&emsp;&emsp;编号:</span>
              <span><el-input
                v-model="input2"
                placeholder="请输入订单编号"
                clearable
                class="input-with-select"
              /></span>
            </div>
            <div class="box-input6" style="width:407px height:40px">
              <span class="txt">所属营业部:</span>
              <el-select
                ref="select"
                v-model="selectVal"
                placeholder="请选择..."
                size="mini"
                clearable
                style="width: 300px"
                class="input-with-select"
              >

                <el-input
                  v-model="treeFilter"
                  class="input"
                  placeholder="此处键入'关键词'搜索查询"
                  prefix-icon="el-icon-search"
                  size="mini"
                  clearable
                  style="width: 300px; "
                />

                <el-option key="id" hidden :value="selectVal" :label="selectName" />
                <el-tree
                  ref="tree"
                  :data="treeData"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  node-key="id"
                  :default-expand-all="true"
                  :filter-node-method="filterNode"
                  @node-click="handleNodeClick"
                >

                  <span slot-scope="{ data }">

                    <span>{{ data.label }}</span>
                    <el-tag
                      v-show="filterorgType(data.tag)"
                      size="mini"
                      style="margin: 0 10px"
                    >{{ filterorgType(data.tag) }}</el-tag>
                  </span>
                </el-tree>
              </el-select>
            </div>
          </div>
          <!-- 下面三个输入框 -->
          <div class="big-box2">
            <div>
              <div class="box-input2" style=" flex-direction: row">
                <span class="txtspan">预计完成时间:</span>
                <el-date-picker
                  v-model="valueTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  class="time-picker"
                />
              </div>
            </div>
            <div class="box-input2" style=" flex-direction: row">
              <span class="txtspan">实际完成时间::</span>

              <el-date-picker
                v-model="valueTime2"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="time-picker"
              />
            </div>
            <div class="box-input2" style=" flex-direction: row">
              分配&emsp;状态:<el-select
                v-model="value"
                clearable
                placeholder="任务分配状态"
                style="padding-left: 30px;
                    padding-right: 30px;
                    width: 360px;"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div style="margin-top:10px  position: relative;">
            <el-row>
              <el-button type="danger" class="btn1">搜索</el-button>
              <el-button class="btn2" @click="empty">重置</el-button>
            </el-row>
          </div>

        </div></el-col>

    </el-row>
    <!-- 中间的 -->
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-main">
        <div class="box-text">
          <button class="btn" @click="changeAll"><span class="text">全部</span></button>
        </div>
        <div class="box-text">
          <button class="btn" @click="changeNew"><span class="text">新任务</span></button>

        </div>
        <div class="box-text">
          <button class="btn" @click="changeFinish"><span class="text">已完成</span></button>
        </div>
        <div class="box-text">
          <button class="btn" @click="changeCancel"><span class="text">已取消</span></button>
        </div>
      </div></el-col>
    </el-row>
    <!-- 下面的 -->
    <el-row style="height:100%">
      <el-col :span="24" style="height:100%"><div class="grid-content bg-purple-below" style="height:100%">
        <div style="margin-top:10px">
          <el-row>
            <el-button type="danger" class="below-btn">搜索</el-button>
          </el-row>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              width="120"
              type="index"
            />
            <el-table-column
              prop="orderId"
              label="取件作业编号"
              width="120"
            />
            <el-table-column
              prop="agencyName"
              label="所在营业部"
              show-overflow-tooltip
            />
            <el-table-column
              label="任务分配状态"
              show-overflow-tooltip
            >
              <template v-slot="{row}">
                {{ row.status === 2 ? '已分配' : '待分配' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="courierName"
              label="快递员姓名"
              show-overflow-tooltip
            />
            <el-table-column
              prop="orderId"
              label="订单编号"
              show-overflow-tooltip
            />
            <el-table-column
              prop="estimatedStartTime"
              label="预计开始时间"
              show-overflow-tooltip
            />
            <el-table-column
              prop="estimatedEndTime"
              label="预计完成时间"
              show-overflow-tooltip
            />
            <el-table-column
              prop="actualEndTime"
              label="实际完成时间"
              show-overflow-tooltip
            />
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            :current-page="data.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.counts"
            @size-change="handleSizeChange"
            @current-change="changePage"
          />
        </div>
      </div></el-col>
    </el-row>
  </div>
</template>
<script>
import { Paginated } from '@/api/pickUptask'

export default {
  name: 'ElSelectTree',
  data() {
    return {
      input: '',
      input2: '',
      valueTime: '',
      valueTime2: '',
      multipleSelection: [],
      // 下方页面跳转
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      // 下拉框
      selectVal: '', // select框的绑定值
      selectName: '', // select框显示的name
      treeFilter: '', // 搜索框绑定值，用作过滤
      // 树形控件数据
      treeData: [
        {
          value: '1',
          label: '东北转运中心',
          tag: 'wife'
        },
        {
          label: '华北转运中心',
          value: '2'
        },
        {
          value: '3',
          label: '华中转运中心',
          children: [
            {
              value: '3-1',
              label: '武汉分拣中心',
              children: [
                {
                  value: '3-1-1',
                  label: '江汉营业部'
                },
                {
                  value: '3-1-2',
                  label: '武昌营业部'
                }
              ]
            }
          ]
        },
        {
          value: '4',
          label: '华东转运中心',
          children: [
            {
              value: '4-1',
              label: '上海分拣中心',
              children: [
                {
                  value: '4-1-1',
                  label: '虹口区营业部'
                },
                {
                  value: '4-1-2',
                  label: '浦东新区营业部'
                }
              ]
            }
          ]
        },
        {
          value: '5',
          label: '西南转运中心',
          children: [
            {
              value: '5-1',
              label: '成都分拣中心',
              children: [
                {
                  value: '5-1-1',
                  label: '青羊区营业部'
                }
              ]
            }
          ]
        },
        {
          label: '金牛区营业部',
          value: '6'
        },
        {
          value: '7',
          label: '西北转运中心',
          children: [
            {
              value: '7-1',
              label: '西安分拣中心',
              children: [
                {
                  value: '7-1-1',
                  label: '碑林区营业部'
                },
                {
                  value: '7-1-2',
                  label: '长安区营业部'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 标签数组
      tagList: [
        { value: 'wife', label: '' },
        { value: 'princess', label: '' },
        { value: 'yyds', label: '' }
      ],
      // 时间选择器
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      // 状态选择器
      options: [{
        value: '选项1',
        label: '已分配'
      }, {
        value: '选项2',
        label: '待分配'
      }],
      value: '',
      // 列表
      queryParams: {
        departmentId: null
      },
      list: [],
      pages: 0,
      data: {
        page: 1, // 页码
        pageSize: 10, // 每页条数
        counts: 0, // 总条数
        status: null// 任务分配状态
      }
    }
  },
  watch: {
    // 搜索过滤，监听input搜索框绑定的treeFilter
    treeFilter(val) {
      this.$refs.tree.filter(val)
      // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
    }
  },

  mounted() {},
  created() {
    this.Paginated()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.data.pageSize = val
      this.Paginated()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 结构树点击事件
    handleNodeClick(data) {
      this.selectVal = data.value // select绑定值为点击的选项的value
      this.selectName = data.label // input中显示值为label
      this.treeFilter = '' // 点击后搜索框清空
      this.$refs.select.blur() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
    },
    // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
    filterNode(value, data) {
      if (!value) return true
      const filterRes = data.label.indexOf(value) !== -1
      return filterRes
    },
    // 选项卡标签（可忽略，增值迭代需求）
    filterorgType(val) {
      const arr = this.tagList.filter((item) => {
        return item.value === val
      })
      return arr.length ? arr[0].label : ''
    },
    // 重置
    empty() {
      this.input = ''
      this.input2 = ''
      this.valueTime = ''
      this.valueTime2 = ''
      this.selectVal = ''
      this.selectName = ''
      this.value = ''
    },
    async Paginated() {
      const res = await Paginated(this.data)
      console.log(res)
      this.list = res.items
      this.data.counts = +res.counts
    },
    changePage(page) {
      this.data.page = page
      this.Paginated()
    },
    changeNew() {
      this.data.status = 1
      this.Paginated()
    },
    changeAll() {
      this.data.status = null
      this.Paginated()
    },
    changeFinish() {
      this.data.status = 2
      this.Paginated()
    },
    changeCancel() {
      this.data.status = 3
      this.Paginated()
    }
  }
}
</script>
<style>
.el-row {
    margin-bottom: 20px;
    font-size: 14px;
  }
.el-row:last-child {
      margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-top {
    background: #ffffff;
    width: 1444px;
    height: 180px;
    padding-top: 20px;
    padding-left: 0;
    padding: 20px;
    margin: 0 auto;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
.bg-purple-main {
    background: #ffffff;
    width: 1444px;
    height: 48px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .bg-purple-below {
    background: #ffffff;
    width: 1444px;
    height: 732.333px;
    margin: 0 auto;
    padding: 28px;
  }
  .input-with-select{
    width: 300px;
    height: 40px;
    margin-left: 20px;
  }
  .box-input{

    justify-content: center;
    flex-direction: row;
  }
  .box-input6{
    width: 407px;
    justify-content: center;
    flex-direction: row;
  }
  .box-input  .txtspan{
    width: 100px;
  }
  .big-box{
    width: 100%;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
  }
  .big-box2{
    margin-top: 10px;
    width: 100%;
    height: 40px;
    display: flex

  }
  .time-picker{
    width: 300px !important;
        margin-left: 15px;
  }
   .box-input2{
    padding-left: 30px;
    padding-right: 22px;
    flex-direction: row
  }
  .btn1{
    width: 90px;
    height: 40px;
    background-color: #e15536;
    margin-left: 30px;
  }
  .btn2{
    width: 90px;
    height: 40px;
    margin-left: 15px;

  }
  .box-text{
    width: 120px;
    height: 100%;
    background-color: #ffffff;
    text-align: center;
    float: left;
  }
  .text{
    line-height: 48px;
  }
  /* 下面 */
  .below-btn{
    width: 97px;
    height: 40px;
    background-color: #e15536;
  margin-bottom: 20px;
  }
  .block{
    text-align: center;
    margin-top: 20px;
  }
  .btn{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: none;
  }
  .btn:hover{
    background-color: #e15536;
  }
</style>